
<script>
	$(function() {
		//未启用数量
		var bootNumber = 0;
		//待机数量
		var standyNumber = 0;  
		//运行数量
		var runNumber = 0;
		//停机数量
		var downtimeNumber = 0;
		//故障数量
		var faultNumber = 0;
		//失效数量
		var failureNumber = 0;
		
		var totalNumber = 0
		$.ajax({
			type : "get",
			url : "../equipment/standyNumber",
			success : function(obj) {
				if (obj.code == 1) {

					standyNumber = obj.data;
					totalNumber += standyNumber;
					$(".awaitNum").text(standyNumber + "台");
					
				}
			}
		});
		$.ajax({
			type : "get",
			url : "../equipment/bootNumber",
			success : function(obj) {
				if (obj.code == 1) {
					bootNumber = obj.data;
					totalNumber += bootNumber;
				}
			}
		});

		//获取待机数量 

		//获取故障数量
		$.ajax({
			type : "get",
			url : "../equipment/faultNumber",
			success : function(obj) {
				if (obj.code == 1) {
					faultNumber = obj.data;
					totalNumber += faultNumber;
					$(".breakdownNum").text(faultNumber + "台");
				}
			}
		});
		//获取运行数量
		$.ajax({
			type : "get",
			url : "../equipment/runNumber",
			success : function(obj) {
				if (obj.code == 1) {
					runNumber = obj.data;
					totalNumber += runNumber;
					$(".worktNum").text(runNumber + "台");
				}
			}
		});
		//获取停机数量
		$.ajax({
			type : "get",
			url : "../equipment/downtimeNumber",
			success : function(obj) {
				if (obj.code == 1) {
					
					downtimeNumber = obj.data;
					totalNumber += downtimeNumber;
				}
			}
		});
		//获取失效数量
		$.ajax({
			type : "get",
			url : "../equipment/failureNumber",
			success : function(obj) {
				if (obj.code == 1) {
					failureNumber = obj.data;
					totalNumber += failureNumber;
					
				}
			}
		});
		//获取开机率
		$.ajax({
			type: "get",
			url : "../equipment/startRate",
			success: function(obj) {
				if (obj.code ==1 ){
					
					var degree = 3.6*obj.data;
					var rate = obj.data;
					
					$(".starting_block").find(".yuan_text").text(rate + "%");
					if(degree > 180) {
						$(".starting_block").find(".yuan_right").hide();
						var degree = degree - 180;
						$(".starting_block").find(".yuan_left").attr("style", "transform: rotate(" + degree + "deg);");
					} else {
						$(".starting_block").find(".yuan_right").attr("style", "transform: rotate(" + degree + "deg);");
					};
				}
				
			}
		});
		//获取故障率
		$.ajax({
			type: "get",
			url: "../equipment/faultRate",
			success: function(obj) {
				console.log(123214124);
				if (obj.code==1){
					var degree = 3.6*obj.data;					
					var rate =obj.data;
					 
					$(".breakdown_block").find(".yuan_text").text(rate + "%");
					if(degree > 180) {
						$(".breakdown_block").find(".yuan_right").hide();
						var degree = degree - 180;
						$(".breakdown_block").find(".yuan_left").attr("style", "transform: rotate(" + degree + "deg);");
					} else {
						$(".breakdown_block").find(".yuan_right").attr("style", "transform: rotate(" + degree + "deg);");
					};
				}
				
			}
		});
		$.ajax({
			type: "get",
			url: "../equipment/runNumberRate",
			success: function(obj) {
				var degree = 3.6*obj.data;					
				var rate =obj.data;
				$(".working_block").find(".yuan_text").text(rate + "%");
				if(degree > 180) {
					$(".working_block").find(".yuan_right").hide();
					var degree = degree - 180;
					$(".working_block").find(".yuan_left").attr("style", "transform: rotate(" + degree + "deg);");
				} else {
					$(".working_block").find(".yuan_right").attr("style", "transform: rotate(" + degree + "deg);");
				};
			}
		});
		
		$.ajax({
			type: "get",
			url: "../equipment/syntheticalRate",
			success: function(obj) {
				var degree = 3.6*obj.data;					
				var rate =obj.data;
				$(".synthetical_block").find(".yuan_text").text(rate + "%");
				if(degree > 180) {
					$(".synthetical_block").find(".yuan_right").hide();
					var degree = degree - 180;
					$(".synthetical_block").find(".yuan_left").attr("style", "transform: rotate(" + degree + "deg);");
				} else {
					$(".synthetical_block").find(".yuan_right").attr("style", "transform: rotate(" + degree + "deg);");
				};
			}
		});
		
	});
</script>
<style>
body {
	margin: 0;
	padding: 0;
}

.yuan {
	width: 160px;
	height: 160px;
	text-align: center;
	background-color: orange;
	position: relative;
	border-radius: 50%;
}

.yuan_text {
	width: 100px;
	height: 100px;
	line-height: 100px;
	color: #FF7F4C;
	font-size: 24px;
	font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑",
		"Microsoft YaHei";
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 30px;
	left: 30px;
}

.left_block, .right_block {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	overflow: hidden;
}

.left_block {
	clip: rect(0px, 80px, 160px, 0px);
}

.right_block {
	clip: rect(0px, 160px, 160px, 80px);
}

.yuan_right {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: gainsboro;
	text-align: center;
	clip: rect(0px, 160px, 160px, 80px);
	/*transform:rotate(50deg);*/
}

.yuan_left {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: gainsboro;
	text-align: center;
	clip: rect(0px, 80px, 160px, 0px);
	/*transform:rotate(50deg);*/
}

.starting_block, .breakdown_block, .working_block, .synthetical_block {
	margin-left: 30px;
	width: 170px;
	height: 200px;
	float: left;
	text-align: center;
	font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑",
		"Microsoft YaHei";
	font-size: 24px;
}

.modal-content {
	font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑",
		"Microsoft YaHei";
	font-size: 24px;
}

.btn_position {
	position: absolute;
	top: 120%;
	left: 40%;
}
</style>



<div class="starting_block">
	<div class="yuan">
		<div class="right_block">
			<div class="yuan_right"></div>
		</div>
		<div class="left_block">
			<div class="yuan_left"></div>
		</div>
		<div class="yuan_text"></div>
	</div>
	开机率
</div>

<div class="breakdown_block" style="color: red;">
	<div class="yuan">
		<div class="right_block">
			<div class="yuan_right"></div>
		</div>
		<div class="left_block">
			<div class="yuan_left"></div>
		</div>
		<div class="yuan_text"></div>
	</div>
	故障率
</div>

<div class="working_block">
	<div class="yuan">
		<div class="right_block">
			<div class="yuan_right"></div>
		</div>
		<div class="left_block">
			<div class="yuan_left"></div>
		</div>
		<div class="yuan_text"></div>
	</div>
	运行率
</div>

<div class="synthetical_block">
	<div class="yuan">
		<div class="right_block">
			<div class="yuan_right"></div>
		</div>
		<div class="left_block">
			<div class="yuan_left"></div>
		</div>
		<div class="yuan_text"></div>
	</div>
	综合率
</div>
<!--
        	作者：luois
        	时间：2018-11-27
        	描述：模态框
        -->
<div class="btn_position">
	<button type="button" class="btn btn-primary" data-toggle="modal"
		data-target=".bs-example-modal-sm">详情</button>

</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
	aria-labelledby="mySmallModalLabel">
	<div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<p>
				待机数量:<span class="awaitNum"></span>
			</p>
			<p>
				运行数量:<span class="worktNum"></span>
			</p>
			<p>
				故障数量:<span class="breakdownNum"></span>
			</p>

		</div>
	</div>
</div>



